<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
    <meta charset="utf-8">
    <title>大猿图书管理系统</title>
</head>

<body style="text-align: center; margin-top: 50px">
<div>
        书名：<input type="text" name="bookName"><br><br>
        作者：<input type="text" name="author"><br><br>
        <input type="hidden" name="action" value="queryByName">
        <input type="text" name="currentPage" value="1">
        <button onclick="queryBookInfo();">查询</button>

</div>

<div>
    <table >
        <tr>
            <td>ID</td>
            <td>书名</td>
            <td>作者</td>
            <td>价格</td>
            <td>出版社</td>
        </tr>

        <div id="bookInfos">

        </div>



    </table>

    <div id="titleDiv"></div>
</div>

<div>
    <a href="###" onclick="firstPage()">首页</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="###" onclick="pre()">上一页</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="###" onclick="next()">下一页</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="###" onclick="lastPage()">尾页</a>
    <div id="pageInfo">1/0</div>
</div>
</body>

<footer></footer>

    <script src="/js/jquery.min.js"></script>
    <script>
        //当前页
        var currentPage = 1;
        var totalPage = 0;

        function queryBookInfo() {
            //ajax异步请求 获取信息
            $.get('/book?action=queryByName&currentPage=' + currentPage, function (data) {
                alert(data.bookInfos);
                alert(data.totalPage);
                console.log(data)

                totalPage = data.totalPage;
                var msg = '';
                for (var i=0; i<data.bookInfos.length; i++) {
                    var bookInfo = data.bookInfos[i];
                    msg += '<tr>\n' +
                        '                <td>'+bookInfo.id+'</td>\n' +
                        '                <td>'+bookInfo.bookName+'</td>\n' +
                        '                <td>'+bookInfo.author+'</td>\n' +
                        '                <td>'+bookInfo.price+'</td>\n' +
                        '                <td>'+bookInfo.publisherName+'</td>\n' +
                        '            </tr>';
                }

                alert(msg);
                // $('#bookInfos').text(msg);
                $('#bookInfos').html(msg);
                // $('#bookInfos').append(msg);
                $('#titleDiv').html("<h1>hello</h1>");

                $('#pageInfo').html(currentPage + '/' + totalPage)
            });
        }

        function lastPage() {
            currentPage = totalPage;
            queryBookInfo();
        }

        function firstPage() {
            currentPage = 1;
            queryBookInfo();
        }

        function next() {
            if (currentPage == totalPage) {
                return;
            }
            currentPage ++;
            queryBookInfo();
        }

        function pre() {
            if (currentPage == 1) {
                return;
            }
            currentPage --;
            queryBookInfo();
        }


    </script>

</html>